.audioplayer{height:.55rem;position:relative;z-index:1;display: flex;justify-content: space-between;background: #f4f4f4}
.audioplayer-playpause{width:.55rem;height:100%;cursor:pointer;z-index:2;}
.audioplayer-playpause:focus,.audioplayer-playpause:hover{}
.audioplayer-playpause a{display:block;width: .55rem;height: 100%;text-align: center;line-height: .55rem;color: #bd2323;font-size: .35rem}
.audioplayer-stopped .audioplayer-playpause a{display: block;}
.audioplayer-playing .audioplayer-playpause a::before{content: "\e618"!important}
.audioplayer-time{width:.6rem;height:100%;line-height:.55rem;text-align:center;z-index:2;top:0}
.audioplayer-time-duration{border-right:1px solid #555;border-right-color:rgba(255,255,255,.1);right:2.5em}
.audioplayer-bar{height:.49rem;position: relative;top:.03rem; background-color:#aaa;cursor:pointer;z-index:1;width: calc(100% - 1.95rem);position: relative;}
.audioplayer-bar div{width:100%;height:90%;position:absolute;left:0;top:5%}
.audioplayer-bar-loaded{z-index:1}
.audioplayer-bar-played{background:#f0a28b;z-index:2}
.audioplayer-bar-played{background:-webkit-gradient(linear,left top,right top,from(#f0a28b),to(#c22d2c));background:-webkit-linear-gradient(left,#f0a28b,#c22d2c);background:-moz-linear-gradient(left,#f0a28b,#c22d2c);background:-ms-radial-gradient(left,#f0a28b,#c22d2c);background:-o-linear-gradient(left,#f0a28b,#c22d2c);background:linear-gradient(to right,#f0a28b,#c22d2c)}
.audioplayer-bar{overflow: hidden;}
.audioplayer-bar:before{position: absolute;left: -2px;top:-2px;right: -2px;bottom: -2px;z-index: 5;background:url() no-repeat  center ;background-size: 100% 100% ; content: ''}